<template>
	<view class="content">
		<!-- 专辑详情 -->
		<view class="album_top">
			<image mode="widthFix" :src="album.cover"></image>
			<view class="top_info">
				<view class="info_text">{{album.name}}</view>
				<view class="info_btn">关注专辑</view>
			</view>
		</view>
		<!-- 介绍 -->
		<view class="txt">
			<view class="txt_info">
               <image :src="album.user.avatar"></image>
			   <view class="txt_wz">
				   {{album.user.name}}
			   </view>
			</view>
			<view class="txt_words">
               <text>{{album.desc}}</text>
			</view>
		</view>
		 <!-- 图片 -->
		 <view class="img_wrow">
		 <view class="img"
		 v-for="(item,i) in wallpaper"
		 :key="item.id"
		 >  
		 <godetail :list='wallpaper' :i='i'>
            <image mode="widthFix" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
		 </godetail>
		 </view>
		 </view>
	</view>
</template>

<script>
import godetail from '@/components/goDetail'
	export default {
		components:{
           godetail
		},
		data() {
			return {
				//页面带过来的id
				id: '',
				//专辑数据
				album:[],
				//请求参数
				data:{
					limit:30,
					order:'new',
					skip:0,
					first:1
				},
				album:{},
				wallpaper:[],
				//默认有数据
				isdata:true
			}
		},
		onLoad(e) {
			console.log(e)
          this.id = e.id
		  this.getAlbum()
		},
		//生命周期页面触底事件
		onReachBottom(){
           if(this.isdata){
			   this.data.first = 0
              this.data.skip += this.data.limit
			  this.getAlbum()
		   }
		},
		methods: {
          getAlbum(){
			 this.request({
				url:`/api/v1/wallpaper/album/${this.id}/wallpaper`,
			  //  url:`http://157.122.54.189:9088/image/v1/wallpaper/album/5e5cf679e7bce739db1281e4/wallpaper`,
				method:"get",
				data:this.data 
			 }).then((res)=>{
				 //详情数据Object.keys判断对象里面有没有属性如果有返回到数组里面这样可以判断对象是否为空
				 if(Object.keys(this.album).length === 0){
				   this.album = res.data.res.album
				 }
				if(res.data.res.wallpaper.length === 0){
                 wx.showLoading({title: '没有更多数据了'})
                    setTimeout(()=>{
                       wx.hideLoading()
                    },1000)
                   this.isdata = false
                   return
				 }
				//图片数据
				//this.wallpaper = res.data.res.wallpaper
                this.wallpaper = [...this.wallpaper,...res.data.res.wallpaper]
				console.log(this.album,this.wallpaper)
			 }) 
		  }
		}
	}
</script>

<style lang='less' scoped>
//专辑详情
    .album_top{
		position: relative;
		image{}
		.top_info{
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			color: #fff;
			padding: 0 20rpx;
		   .info_text{
			   font-size: 40rpx;
		   }
		   .info_btn{
			   font-size: 24rpx;
			   border-radius:5rpx;
			   width: 152rpx;
			   height: 60rpx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   background-color:#d52a7e;
		   }	
		}
	}
//介绍
.txt{
	 padding: 20rpx;
	 margin-bottom: 40rpx;
  .txt_info{
	  display: flex;
	  align-items: center;
	  image{
		  width: 50rpx;
		  height: 50rpx;
	  }
	  .txt_wz{
		  font-size: 24rpx;
		  font-weight: bold;
		  margin: 20rpx;
	  }
  }
  .txt_words{}
}
//图片
.img_wrow{
	display: flex;
	flex-wrap: wrap;
.img{
	  width: 33.33vw;
	  border: 3rpx solid white;
  image{
  }
}
}
</style>
